<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row>
          <a-col :span="14">
              <a-input-group compact >
                <!-- <v-region type="column" :town="true" @values="regionChange"></v-region> -->
                <a-select @change="changeyear" v-model="year" style="width: 120px;">
                  <a-select-option value="2019">2019</a-select-option>
                  <a-select-option value="2020">2020</a-select-option>
                </a-select>
                <a-select @change="changemonth" v-model="month" style="width: 120px;">
                  <a-select-option value="">无</a-select-option>
                  <a-select-option value="1">1月</a-select-option>
                  <a-select-option value="2">2月</a-select-option>
                  <a-select-option value="3">3月</a-select-option>
                  <a-select-option value="4">4月</a-select-option>
                  <a-select-option value="5">5月</a-select-option>
                  <a-select-option value="6">6月</a-select-option>
                  <a-select-option value="7">7月</a-select-option>
                  <a-select-option value="8">8月</a-select-option>
                  <a-select-option value="9">9月</a-select-option>
                  <a-select-option value="10">10月</a-select-option>
                  <a-select-option value="11">11月</a-select-option>
                  <a-select-option value="12">12月</a-select-option>
                </a-select>
                <span class="diqudiv">地区 :</span>
                <v-region type="group" :town="true" @values="regionChange" style="margin-left:10px;"></v-region>
                <!-- <a-button type="primary" icon="search" style="margin-left: 8px; border-radius:4px;" @click="search">查询</a-button> -->
              </a-input-group>
          </a-col>
          <a-col :span="10">
            <template v-if="tabkey == 1">
              <a-radio-group v-model="datatype"  @change="changedatatype" style="float:right;">
                <a-radio-button :value="1">日</a-radio-button>
                <a-radio-button :value="2">周</a-radio-button>
                <a-radio-button :value="3">月</a-radio-button>
              </a-radio-group>
            </template>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 图表区域 -->
    <a-row>
      <a-tabs defaultActiveKey="1" @change="qhtap">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="bar-chart" />
            统计图
          </span>
          <a-spin tip="Loading..." :spinning="spinning">
            <a-col :span="24">
              <template>
                <div id="myChart" class="echartview"></div>
              </template>
            </a-col>
          </a-spin>
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="dot-chart" />
            热力图
          </span>
          <a-spin tip="Loading..." :spinning="spinning">
            <a-col :span="24">
              <template>
                <baidu-map class="echartview" :center="{lng: lng, lat: lat}" :zoom="14" :scroll-wheel-zoom='true'>
                  <bml-heatmap :data="mapdata" :max="max" :radius="20" v-if="!spinning">
                  </bml-heatmap>
                </baidu-map>
              </template>
            </a-col>
          </a-spin>
        </a-tab-pane>
      </a-tabs>
    </a-row>

  </a-card>
</template>

<script>
  import { BmlHeatmap } from 'vue-baidu-map'
  import { getAction,postAction } from '@/api/manage'
  
  export default {
    components: {
      BmlHeatmap
    },
    data () {
      return {
        datatype:3, //类型 1:日 2:周 3月
        code:'',  //行政区编码
        year:2020, //年
        month:'',  //月
        spinning: false, //加载特效
        tabkey:1,   //切换索引
        bigdata:{},  //统计数据
        newdata:{
          xdata:[], //横轴数据
          sdata:[], //值
        },
        mapdata: [],  //地图热力数据
        lng:116.404, //经度
        lat:39.915, //纬度
        max:100,  //权重最大值
      }
    },
    watch: {
    },
    created () {
    },
    mounted () {
      this.$nextTick(() => {
        var that = this;
        that.getdata();
      })
    },
    methods: {
      // 请求统计次数
      getdata: function (e) {
        var that = this;
        that.spinning = true;
        let param = {
          code:that.code,
          month:that.month,
          type:that.datatype,
          year:that.year,
        }
        getAction("/healthCollects/brokenLine",param).then(res=>{
          if(res.success){
            that.bigdata = res.result;  //数据统计
            setTimeout(function(){
                that.spinning = false;
                that.usechart(); //调用数据采集次数
            }, 200); //图表方法内含有dom操作延时处理
          }else{
            that.spinning = true;
            this.$message.info(res.message);
          }
        })
      },
      // 请求热力次数
      gethotdata: function (e) {
        var that = this;
        that.spinning = true;
        let param = {
          code:that.code,
          month:that.month,
          year:that.year,
        }
        getAction("/healthCollects/hotChart",param).then(res=>{
          if(res.success){
            setTimeout(function(){
                that.spinning = false;
                that.mapdata = res.result;   //热力数据
                if(that.mapdata == ''){
                  that.$message.info("暂无数据");
                }
                if(res.result.length > 0){
                  that.lng = res.result[0].lng; //经度
                  that.lat = res.result[0].lat; //纬度
                  that.max = res.result[0].count; //权重最大值
                }
            }, 200);
          }else{
            that.spinning = true;
            this.$message.info(res.message);
          }
        })
      },
      //数据采集次数处理
      usechart: function (e) {
          var that = this
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart'),'macarons')
          //数组重构
          that.newdata.xdata = [];  //先重置空
          that.newdata.sdata = [];  //先重置空
          for (let i = 0; i < that.bigdata.length; i++){
              that.newdata.xdata.push(that.bigdata[i].date);
              that.newdata.sdata.push(that.bigdata[i].number);
          }
          // 指定图表的配置项和数据
          var option = {
              title: { text: "数据采集次数统计" },
              tooltip: { trigger: "axis" },
              toolbox: {
                show: true,
                orient: "vertical",
                x: "right",
                y: "center",
                right: 20,
                feature: {
                  restore: { show: true, title:'还原'},
                  magicType: { show: true, type: [ 'line', 'bar', 'stack', 'tiled'] },
                  saveAsImage: { show: true, title:'保存为图片' },
                  dataView: { show: true, title:'数据视图' },
                }
              },
              // grid: { x: 40, x2: 40, y2: 24 },
              // calculable: !0,
              xAxis: [
                {
                  type: "category",
                  boundaryGap: !1,
                  data: that.newdata.xdata
                }
              ],
              yAxis: [{ type: "value", axisLabel: { formatter: "{value} 次" } }],
              series: [
                {
                  type: "line",
                  data: that.newdata.sdata,
                  markPoint: {
                    data: [
                      { type: "max", name: "最大值" },
                      { type: "min", name: "最小值" }
                    ]
                  },
                  markLine: { data: [{ type: "average", name: "平均值" }] }
                }
              ]
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
          window.addEventListener("resize",function(){
              myChart.resize();
          });
      },
      //城市选择
      regionChange (e) {
        var that = this;
        if(e.province){
          that.code = e.province.key;
        }
        if(e.city){
          that.code = e.city.key;
        }
        if(e.area){
          that.code = e.area.key;
        }
        if(e.town){
          that.code = e.town.key;
        }
        if(!e.province && !e.city && !e.area && !e.town){
          that.code = '';
        }
        // console.log("查看编码");
        // console.log(that.code);
        that.search();
      },
      //年份选择
      changeyear:function(e){
        var that = this;
        that.year = e;  //赋值年份
        that.search();
      },
      //月份选择
      changemonth:function(e){
        var that = this;
        that.month = e; //赋值月份
        that.search();
      },
      //时间展示类型
      changedatatype:function(e){
        var that = this;
        that.datatype = e.target.value; //赋值时间选择类型
        that.search();
      },
      //切换tap
      qhtap:function(e){
        var that = this;
        that.tabkey = e; //更改tab索引
        that.search();  //重新请求
      },
      //筛选
      search:function(e){
        var that = this;
        if(that.tabkey == 1){
          that.getdata();  //调用折线
        }
        if(that.tabkey == 2){
          that.gethotdata();  //调用热力请求
        }
      },
    }
  }
</script>

<style scoped>
@import '~@assets/less/common.less';
/* 统计图 */
.chartdivs{
  width: 100%;
  height: 600px;
  margin-top: 30px;
}
/* 加载提示 */
.diqudiv{
  height: 30px;
  line-height: 30px;
  color: #666;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 30px;
}
.echartview{
  width: 100%;
  height: 680px;
  margin-top: 50rpx;
}
</style>